<template>
  <div class="rob_box">
    <div style="text-align: right; padding-right: 16px">
      <Button type="primary" style="margin-right: 10px" @click="caseOpenBtn">案场开启状态</Button>
      <Button type="primary" @click="openRecord">操作记录</Button>
    </div>
    <div class="title">案场内抢客池配置</div>
    <dt-grid ref="table" :onFetch="onFetch" />
    <!-- 操作记录 -->
    <data-record ref="operationRecord"></data-record>
    <Modal v-model="showModal" title="编辑" width="600" :footer-hide="true">
      <Row align="middle" v-if="showPeople == 2">
        <Col :span="6">
          <div>抢客池开启：</div>
        </Col>
        <Col :span="18">
          <tree_select
            v-model="companyId"
            ref="areaTree"
            :treeList="companyList"
            selectPlaceholder="请选择"
            :maxTagCount="3"
            :saveParent="true"></tree_select>
        </Col>
        <Col :span="6" style="margin-top: 10px">
          <div>同步至：</div>
        </Col>
        <Col :span="18" style="margin-top: 10px">
          <RadioGroup v-model="caseChoose" type="button">
            <Radio :label="1">全部案场</Radio>
            <Radio :label="0">标准案场（“自定义规则案场”不会同步）</Radio>
          </RadioGroup>
        </Col>
      </Row>
      <Row align="middle" v-if="showPeople == 1">
        <Col :span="6">
          <div>每日最大抢客数：</div>
        </Col>
        <Col :span="6">
          <RadioGroup v-model="limitStatus" @on-change="() => (this.robNum = 5)">
            <Radio label="1">
              <span>不限</span>
            </Radio>
            <Radio label="2">
              <span>限制</span>
            </Radio>
          </RadioGroup>
        </Col>
        <Col :span="8" v-if="limitStatus == '2'">
          <InputNumber type="number" :min="0" :precision="0" v-model="robNum"></InputNumber>
        </Col>
        <Col :span="2" :offset="1" v-if="limitStatus == '2'">
          <div>人</div>
        </Col>
      </Row>
      <Row align="middle" v-if="showPeople == 3">
        <Col :span="12">
          <div>客户冷却期：</div>
          <div>（保护期内的客户不会被反复抢客）</div>
        </Col>
        <Col :span="10">
          <InputNumber type="number" :min="0" :precision="0" v-model="protectNum"></InputNumber>
        </Col>
        <Col :span="1" :offset="1">
          <div>天</div>
        </Col>
      </Row>
      <div class="btn_box">
        <Button type="primary" @click="ok">确定</Button>
        <Button style="margin-right: 24px" @click="cancel">取消</Button>
      </div>
    </Modal>
    <case-open-list ref="caseOpenList"></case-open-list>
  </div>
</template>

<script>
  import column from './opt/columns'
  import protectOption from '@/biz/protectOption/protectOption'
  import caseOpenList from './components/caseOpenList.vue'
  import tree_select from '@/components/tree_select.vue'
  import processApi from '@/biz/flowApproval/processManagement'
  export default {
    name: 'DtManagementIndex',

    components: {
      caseOpenList,
      tree_select
    },
    data() {
      return {
        tableData: [
          { option: '抢客池开启', optionText: 3 },
          { option: '每日最大抢客数', optionText: 3 },
          { option: '客户冷却期', optionText: 3 }
        ],
        showModal: false,
        robNum: 5,
        protectNum: 3,
        showPeople: 1,
        currentId: null,
        currentOption: null,
        limitStatus: '1',
        companyId: [],
        companyList: [],
        caseChoose: 1
      }
    },

    mounted() {
      this.$refs.table.init(this, new column(this))
      this.$refs.table.fetch()
    },

    methods: {
      //获取业务组织架构
      getBusinessList(data) {
        console.log(data, 'vvv')
        processApi.getBusinessOrganTree().then((res) => {
          if (data) {
            let companyIdTmp = data.companyId?.split(',')
            res &&
              res.forEach((item) => {
                if (companyIdTmp && companyIdTmp.includes(String(item.id))) {
                  item.checked = true
                }
                item.children.forEach((itemC) => {
                  if (companyIdTmp && companyIdTmp.includes(String(itemC.id))) {
                    itemC.checked = true
                  }
                  itemC.children.forEach((itemL) => {
                    if (companyIdTmp && companyIdTmp.includes(String(itemL.id))) {
                      itemL.checked = true
                    }
                  })
                })
              })
          }
          this.companyList = res
        })
      },
      caseOpenBtn() {
        this.$refs.caseOpenList.show()
      },
      openRecord() {
        console.log('打开弹窗')
        this.$refs.operationRecord.show('rob')
      },
      async onFetch() {
        let res = await protectOption.getRobList()
        this.tableData = [
          {
            option: '抢客池开启',
            optionText: res ? res.openButtonOrgIdsName : 0,
            id: res ? res.id : null,
            openButtonOrgIds: res.openButtonOrgIds,
            synchronizeStatus: res.synchronizeStatus
          },
          { option: '每日最大抢客数', optionText: res ? res.snatchingNumber : 0, id: res ? res.id : null },
          { option: '客户冷却期', optionText: res ? res.coolingPeriod : 0, id: res ? res.id : null }
        ]
        return Promise.resolve(this.tableData)
      },
      edit(row) {
        console.log(row, 'row')

        this.currentId = row.id
        this.currentOption = row.option
        if (row.option === '每日最大抢客数') {
          this.showPeople = 1
          if (row.optionText && row.optionText >= 0) {
            console.log(123123, row.optionText)
            this.limitStatus = '2'
            this.robNum = row.optionText
          } else {
            this.limitStatus = '1'
          }
        } else if (row.option == '抢客池开启') {
          this.$nextTick(async () => {
            await this.getBusinessList({ companyId: row.openButtonOrgIds })
          })
          this.showPeople = 2
          this.companyId = row.openButtonOrgIds?.split(',')
          this.caseChoose = row.synchronizeStatus
        } else {
          this.showPeople = 3
          this.protectNum = row.optionText
        }
        this.showModal = true
      },
      ok() {
        if (this.currentOption === '每日最大抢客数') {
          if (!this.robNum) return this.$Message.error('请输入最大抢客数')
          this.editFun({ snatchingNumber: this.limitStatus == '2' ? this.robNum : null, changeType: 2 })
        } else if (this.currentOption === '抢客池开启') {
          this.editFun({
            synchronizeStatus: this.caseChoose,
            changeType: 1,
            openButtonOrgIds: this.companyId
          })
        } else {
          if (this.protectNum >= 0) {
            this.editFun({ coolingPeriod: this.protectNum, changeType: 3 })
          } else {
            return this.$Message.error('请输入客户冷却期')
          }
        }
      },
      editFun(params) {
        let data = {
          ...params,
          id: this.currentId
        }
        protectOption.editRobItem(data).then((res) => {
          this.$Message.success('修改成功')
          this.showModal = false
          this.$refs.table.fetch()
        })
      },
      cancel() {
        this.showModal = false
        this.companyId = null
        this.caseChoose = 1
      }
    }
  }
</script>

<style lang="scss" scoped>
  .rob_box {
    padding: 24px;
  }
  .title {
    font-size: 16px;
    color: #000;
  }
  .labelClass {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .btn_box {
    margin-top: 24px;
    display: flex;
    flex-direction: row-reverse;
    padding-right: 24px;
  }
</style>
